<template>
  <div>
    <Header breadcrumb="TrT" title="工艺配置 -- 指令清单" />
    <div class="TrT-container">
      <el-row :gutter="20" class="form">
        <el-col :span="7">
          TrT/备注:
          <el-input placeholder="请输入Key" v-model="requestParamsObj.name" @change="getData()" @keyup.enter="getData" :disabled="loading || checking"> </el-input>
        </el-col>
      </el-row>

      <TableOperationButtons :loading="loading" :newButton="newButton" :deleteButton="deleteButton" :testButton="testButton" improtUrl="/trt/importCSV" exportUrl="/trt/exportCSV" improtUrlDisabled exportUrlDisabled></TableOperationButtons>

      <el-alert :title="alertTitle" type="info" show-icon v-if="alertTitle">
      </el-alert>

      <vxe-table :height="tableHeight" keep-source border resizable show-overflow ref="xTable" class="vxe-table" empty-text="没有更多数据了！" :scroll-y="{ enabled: false }" :loading="loading" :data="tableData" :sort-config="{trigger: 'cell',showIcon: true, defaultSort: {field: 'id', order: 'asc'},orders: [ 'asc', 'desc','']}" @toggle-row-expand="toggleExpandChangeEvent" @edit-closed="editClosedEvent" @header-cell-click="headerCellClickEvent" @edit-disabled="editDisabledEvent" :edit-config="{
        trigger: 'dblclick',
        mode: 'row',
        showStatus: true,
        icon: 'el-icon-s-tools',
      }" :row-config="{isCurrent: true, isHover: true}" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
        <vxe-column type="checkbox" width="40" :disabled="true"></vxe-column>
        <vxe-column type="expand" width="40">
          <template #content="{ row, rowIndex }">
            <TrTson :row="row" :rowIndex="rowIndex" v-if="row.key"></TrTson>
          </template>
        </vxe-column>
        <vxe-column field="key" sortable title="Key" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input type="text" v-model="row.key" :disabled="!row.isNew"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="comment" title="comment" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
        <vxe-column title="操作">
          <template #default="{ row }">
            <div class="operation-cell">
              <el-link type="success" v-if="!checking && row.isNew" @click="saveData(row)">保存</el-link>
              <el-popover placement="top" width="180" v-model="row.visible">
                <p>确定要删除这一行({{ row.id }})吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="deleteButtonEvent([row]);row.visible = false;">确定</el-button>
                </div>
                <el-link slot="reference" type="danger" v-if="!checking">删除</el-link>
              </el-popover>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="comments" title="备注" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>        
      </vxe-table>

      <vxe-pager background @page-change="handlePageChange" :current-page.sync="requestParamsObj.page.page" :page-size.sync="requestParamsObj.page.size" :total="requestParamsObj.page.total" :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import Header from './common/Header.vue';
import TrTson from './TrTSon.vue';
import TableOperationButtons from './common/TableOperationButtons.vue';
import { findTrtByName, setTrt, delTrts } from '@/api/request';

export default {
  name: 'TrT',
  data() {
    return {
      loading: false,
      checking: false,
      alertTitle: '',
      tableHeight: 500,
      tableData: [],
      requestParamsObj: {
        name: '',
        orderBy: {
          fieldName: 'id',
          fieldOrderType: 'asc',
        },
        page: {
          page: 1,
          size: 15,
          total: 0,
        },
      },
      newButton: {
        event: this.newButtonEvent,
      },
      deleteButton: {
        event: this.deleteButtonEvent,
        length: 0,
      },
      testButton: {
        clicked: false,
      },
    };
  },
  components: {
    Header,
    TrTson,
    TableOperationButtons,
  },
  mounted() {
    this.getData();
    this.resize();
    const that = this;
    window.onresize = () => {
      that.resize();
    };
  },
  methods: {
    resize(alertTitleHeight) {
      const heightArray = Object.values(this.$store.state.height);
      let heights = 0;
      heightArray.forEach((item) => {
        heights += item;
      });
      this.tableHeight = document.documentElement.clientHeight
        - heights
        - 112
        - (alertTitleHeight || 0);
    },
    getData(isChecking) {
      this.alertTitle = null;
      this.$refs.xTable.clearCheckboxRow();
      const requestParamsObj = JSON.parse(
        JSON.stringify(this.requestParamsObj),
      );
      delete requestParamsObj.page.total;
      if (!isChecking) {
        this.loading = true;
      }
      findTrtByName(requestParamsObj)
        .then((res) => {
          if (res.status === 200) {
            this.requestParamsObj.page = {
              page: res.data.page,
              size: res.data.size,
              total: res.data.total,
            };
            this.tableData = res.data.result.map((item) => {
              const temp = item;

              temp.qplcname = this.GLOBAL.getPLC(item.qplcAddr).plcname;
              temp.qplcvalue = this.GLOBAL.getPLC(item.qplcAddr).plcvalue;

              temp.rplcname = this.GLOBAL.getPLC(item.rplcAddr).plcname;
              temp.rplcvalue = this.GLOBAL.getPLC(item.rplcAddr).plcvalue;

              return {
                ...temp,
              };
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 表格编辑完
    editClosedEvent({ row, column }) {
      const $table = this.$refs.xTable;
      const field = column.property;
      // const cellValue = row[field];
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        if (row.isNew) {
          return;
        }
        this.saveData(row);
      }
    },

    //  保存数据
    saveData(row) {
      const savaObj = {
        key: row.key || '',       
        comments: row.comments || '',
      };

      setTrt(savaObj).then((res) => {
        if (res.status === 200) {
          this.getData();
          this.$message({
            message: res.msg || '恭喜你，成功!',
            type: 'success',
          });
        }
      });
    },
    // 切换表格排序的规则
    headerCellClickEvent({
      column,
      // triggerResizable,
      // triggerSort,
      // triggerFilter,
    }) {
      // 如果触发了列的其他功能按钮
      if (column.sortable) {
        if (column.order) {
          this.requestParamsObj.orderBy = {
            fieldName: column.property,
            fieldOrderType: column.order,
          };
        } else {
          delete this.requestParamsObj.orderBy;
        }
        this.getData();
      }
    },
    editDisabledEvent({ row, column }) {
      console.log(row, column);
      // this.$XModal.message({ content: '禁止编辑', status: 'error' });
      this.$message({
        message: '监控状态下不能操作表格数据',
        type: 'warning',
        // duration: 999999,
      });
    },
    // 全选事件
    selectAllEvent({ records }) {
      this.multipleSelection = records;
      this.deleteButton.length = records.length;
      this.alertTitle = records.length
        ? `已经选择 ${records.length} 了项`
        : null;
      this.resize(records.length ? 55 : 0);
    },
    // 勾选事件
    selectChangeEvent({ records }) {
      this.multipleSelection = records;
      this.deleteButton.length = records.length;
      this.alertTitle = records.length
        ? `已经选择 ${records.length} 了项`
        : null;
      this.resize(records.length ? 55 : 0);
    },
    // 分页参数改变
    handlePageChange(page) {
      this.requestParamsObj.page = {
        page: page.currentPage,
        size: page.pageSize,
      };
      this.getData();
    },
    //  新建的操作
    async newButtonEvent() {
      const $table = this.$refs.xTable;
      const record = {
        isNew: true,
        comments: '',
        key: ''
      };
      const { row: newRow } = await $table.insertAt(record);
      await $table.setActiveCell(newRow, 'id');
    },
    // 删除表格数据
    deleteButtonEvent(rows) {
      const list = rows || this.multipleSelection;
      const remoteData = list.filter((item) => item.id).map((item) => item.id);
      // this.$refs.xTable.removeCheckboxRow();
      if (remoteData.length) {
        this.loading = true;
        delTrts(remoteData)
          .then((res) => {
            if (res.status === 200) {
              this.$message({
                message: res.msg || '恭喜你，这是一条成功消息',
                type: 'success',
              });
              this.getData();
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 展开行的切换
    toggleExpandChangeEvent({ row }) {
      if (!row || !row.key) {
        this.$message({
          message: '保存成功本条数据后才能展开子表',
          type: 'error',
        });
      }
      return true;
    },
  },
  computed: {
    formatOptions() {
      return this.$store.state.formatOptions || {};
    },
    plcTypeOptions() {
      return this.$store.state.plcTypeOptions || {};
    },
    plcAddrOptions() {
      return this.GLOBAL.getPlcAddrOptions() || [];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.TrT-container {
  padding: 1rem;
  .form {
    // margin: 1rem 0;
    .el-input {
      width: 200px;
      display: inline-block;
      margin-left: 0.5rem;
    }
  }
  /deep/ .vxe-body--expanded-column {
    background-color: #e6f7ff;
  }
  .el-alert {
    margin-bottom: 1rem;
  }
}
</style>
